<!-- 通用表单卡片 -->
<template>
  <div class="edit-card">
    <a-spin :spinning="loading" class="full-screen-spin" :tip="loadingTip">
      <div class="card__main">
        <a-affix ref="pageHeaderRef" :offset-top="layoutInfo.headerHeight">
          <a-row :align="'middle'" :class="['page-header', 'bottom-border']" @click.stop="">
            <slot name="title">
              <div v-if="type === 'add'" class="add-btn-title">
                <a-button :disabled="isFirstPage" class="iconfont icon-only-btn" @click="goBack">
                  <i class="iconfont icon-arrow-go-back-line" style="font-size: 18px"></i>
                </a-button>
                <div class="default-title" :title="title">
                  <span class="title-text">
                    {{ title }}
                  </span>
                  <slot class="title-text" name="titleInfo"></slot>
                </div>
              </div>
              <template v-if="type === 'edit'">
                <div class="edit-class">
                  <div class="default-title" :title="title">
                    <span class="title-text">{{ title }} </span>
                    <slot name="titleInfo"></slot>
                  </div>

                  <div class="edit-buttons-class">
                    <a-button :disabled="isFirstPage" @click="goBack">取消</a-button>
                    <a-button type="primary" @click="emits('confirm')">保存</a-button>
                  </div>
                </div>
              </template>
            </slot>
          </a-row>
        </a-affix>

        <div
          class="main-data"
          :style="{
            height: `calc(100% - ${pageHeaderHeight}px - ${pageFooterHeight}px)`
            // 'padding-top': `${type === 'add' ? 40 : 80}px`
          }"
        >
          <a-spin :spinning="loadingStore.isGlobalLoading">
            <slot name="add-title"> </slot>
            <slot name="default"></slot>
          </a-spin>
          <a-row v-if="type === 'add'" class="tool-space">
            <a-col>
              <a-button type="primary" @click="emits('confirm')">确定</a-button>
            </a-col>
            <a-col>
              <a-button @click="goBack">取消</a-button>
            </a-col>
          </a-row>
        </div>
        <div ref="pageFooterRef" class="page-footer">
          <slot name="page-footer"></slot>
        </div>
      </div>
    </a-spin>
  </div>
</template>

<script setup lang="ts">
  import { onBeforeMount, onMounted, ref } from 'vue'
  import { useRouter } from 'vue-router'

  import { useLoadingStore } from '@/store/loading'
  import { useSysInfoStore } from '@/store/sys-info'

  export type Type = 'add' | 'edit'

  interface Props {
    type: Type
    loading?: boolean
    title?: string
    iconName?: string
    loadingTip?: string
    //自定义返回按钮跳转地址
    backUrl?: string
  }

  const props = withDefaults(defineProps<Props>(), {
    title: '',
    iconName: '',
    loading: false,
    loadingTip: '',
    type: 'add',
    backUrl: ''
  })

  const emits = defineEmits(['scrollBottom', 'confirm'])

  const router = useRouter()
  const loadingStore = useLoadingStore()
  const { layoutInfo } = useSysInfoStore()

  const isFirstPage = window.history.length === 1

  function goBack() {
    if (props.backUrl) {
      router.push(props.backUrl)
      return
    }
    router.back()
  }

  /* TODO:页面滚动逻辑 */
  //#region
  const pageHeaderRef = ref<null | HTMLElement>(null)
  const pageFooterRef = ref<null | HTMLElement>(null)
  const pageHeaderHeight = ref(0)
  const pageFooterHeight = ref(0)

  const isScrollStart = ref(false)
  const modalBodyScroll = () => {
    let d = document.querySelector('.main-data') as Element
    const scrollTop = d.scrollTop
    isScrollStart.value = (scrollTop || 0) > 0
    if (d.scrollHeight - d.clientHeight - scrollTop < 2) {
      emits('scrollBottom')
    }
  }

  // 开始监听页面滚动
  function openWatchScroll() {
    pageHeaderHeight.value = pageHeaderRef.value!.offsetHeight
    pageFooterHeight.value = pageFooterRef.value!.offsetHeight
    document.querySelector('.main-data')?.addEventListener('scroll', modalBodyScroll)
    let observer = new ResizeObserver(entries => {
      pageFooterHeight.value = (entries[0].target as HTMLDivElement).offsetHeight
    })
    console.log(pageFooterHeight.value)
    observer.observe(pageFooterRef.value!)
  }

  // 停止监听页面滚动
  function closeWatchScroll() {
    document.querySelector('.main-data')?.removeEventListener('scroll', modalBodyScroll)
  }
  //#endregion

  onMounted(() => {
    openWatchScroll()
  })
  onBeforeMount(() => {
    closeWatchScroll()
  })
</script>

<style lang="less" scoped>
  @import '@/styles/mixins.less';

  .edit-card {
    padding: 26px 0;
    margin: 0 auto;
    width: 1200px;
    // background: #fafafa;

    .card__main {
      position: relative;
      overflow: hidden;
      width: 100%;
      height: 100%;
      background: #fff;
      box-shadow: 0 1px 3px rgba(37, 37, 45, 0.14), 0 2px 8px rgba(37, 37, 45, 0.14);

      .page-header {
        position: relative;
        top: 0;
        left: 0;
        z-index: 20;
        padding: 0 20px;
        width: 100%;
        min-height: 60px;
        background: #fff;

        &.bottom-border {
          border-bottom: 1px solid @mask1;
          margin-bottom: -1px;
        }

        .title-icon {
          margin-right: 10px;

          .icon {
            font-size: 20px;
            color: @primary1;
          }
        }

        .add-btn-title {
          width: 100%;
        }

        .default-title {
          .font16b();
          .elliptical-1();

          display: flex;
          align-items: center;
          gap: 8px;
          width: 85%;
          color: @text01;

          .title-text {
            .elliptical-1();

            cursor: default;
            max-width: 90%;
          }
        }
      }

      .main-data {
        position: relative;
        overflow-y: auto;
        // padding: 40px 0 120px 168px;
        padding: 56px 80px 120px;
        width: 100%;

        .add-title {
          margin-bottom: 56px;

          .title-icon {
            margin-right: 10px;

            .icon {
              font-size: 20px;
              color: @primary1;
            }
          }

          .default-title {
            .font20b();

            position: relative;
            // margin-left: 16px;

            &::before {
              position: absolute;
              top: 50%;
              left: -16px;
              width: 3px;
              height: 22px;
              background: #1868e9;
              border-radius: 0 2px 2px 0;
              content: '';
              transform: translateY(-50%);
              flex: none;
              order: 0;
              align-self: stretch;
              flex-grow: 0;
            }
          }
        }

        .tool-space {
          padding-left: 120px;
          margin-top: 120px;
          gap: 0 12px;
        }
      }

      .page-footer {
        position: relative;
        bottom: 0;
        left: 0;
        width: 100%;
      }
    }
  }

  .add-btn-title {
    display: flex;
    gap: 12px;
    align-items: center;
  }

  .edit-class {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }

  .edit-buttons-class {
    display: flex;
    gap: 8px;
  }
</style>
